<template>
  <div>
    <div class="box">
      <!-- 版心 -->
      <div class="w">
        <!-- 头部 -->
        <el-row>
          <el-col :span="7">
            <div class="grid-content bg-purple-dark">
              <router-link to="/">
                <el-col :span="12">
                  <img src="@/assets/images/Logo-1.jpg" alt="">
                </el-col>
              </router-link>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-dark">
              <i class="el-icon-message">&nbsp;support@example.com</i>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-dark">
              <i class="el-icon-phone">&nbsp;+86 13312345678</i>
            </div>
          </el-col>
          <el-col :span="1">
            <div class="grid-content bg-purple-dark">
              <span class="iconfont icon-weixin" @click="flag = !flag">
              </span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-dark">
              <el-row>
                <el-col :span="12">
                  <el-button type="text" @click="centerDialogVisible = true" style="width: 90px;">登录</el-button>
                </el-col>
                <el-col :span="12">
                  <el-button type="text" @click="registerDialog = true" style="width: 90px;">注册</el-button>
                </el-col>
                <!-- 登录弹框 -->
                <el-dialog :visible.sync="centerDialogVisible" center>
                  <div class=" tankuang">
                    <el-row>
                      <el-col :span="11">
                        <div class="grid-content bg-purple">
                          <img src="@/assets/images/loginBg.jpg" alt="">
                        </div>
                      </el-col>
                      <el-col :span="13">
                        <div class="grid-content bg-purple-light tankuangRight">
                          <h3>登录</h3>
                          <el-form :rules="rules" :model="form">
                            <el-form-item prop="mobile">
                              <el-input placeholder="请输入手机号" v-model="form.mobile" clearable>
                              </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                              <el-input placeholder="请输入密码" v-model="form.password" show-password>
                              </el-input>
                            </el-form-item>
                            <el-row>
                              <el-button type="danger" class="tankuangButton tankuangButton1">登录</el-button>
                            </el-row>
                            <i>还没有账号？</i>
                            <el-row>
                              <el-button type="primary" class="tankuangButton tankuangButton2">立即注册</el-button>
                            </el-row>
                          </el-form>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-dialog>
                <!-- 注册弹框 -->
                <el-dialog :visible.sync="registerDialog" center>
                  <div class="zhuCeTanKuang">
                    <el-row>
                      <el-col :span="11">
                        <div class="grid-content bg-purple">
                          <img src="@/assets/images/registerDialog.jpg" alt="">
                        </div>
                      </el-col>
                      <el-col :span="13">
                        <div class="grid-content bg-purple-light tankuangRight">
                          <h3>注册</h3>
                          <el-form :rules="rules" :model="form">
                            <el-form-item prop="shouji">
                              <el-input placeholder="请输入手机号" v-model="form.shouji" clearable>
                              </el-input>
                            </el-form-item>
                            <el-form-item prop="yanzhengma">
                              <el-input placeholder="请输入6位验证码" v-model="form.yanzhengma" clearable>
                              </el-input>
                            </el-form-item>
                            <el-form-item prop="yonghuming">
                              <el-input placeholder="设置用户名" v-model="form.yonghuming" clearable>
                              </el-input>
                            </el-form-item>
                            <el-form-item prop="shezhimima">
                              <el-input placeholder="设置密码" v-model="form.shezhimima" show-password></el-input>
                            </el-form-item>
                            <el-form-item prop="querenmima">
                              <el-input placeholder="确认密码" v-model="form.querenmima" show-password></el-input>
                            </el-form-item>
                            <el-row>
                              <el-button type="primary" class="tankuangButton tankuangButton2">立即注册</el-button>
                            </el-row>
                          </el-form>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-dialog>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <!-- <headDialog :centerDialogVisible="centerDialogVisible" /> -->
        <img src="@/assets/images/erweima.png" class="erweima" v-show="flag">
      </div>
    </div>
  </div>
</template>
<script>
// import headDialog from '../components/HeadDialog.vue'
export default {
  data() {
    return {
      // v-show隐藏显示
      flag: false,

      //input
      form: {
        mobile: '',
        password: '',
        shouji: '',
        yanzhengma: '',
        yonghuming: '',
        shezhimima: '',
        querenmima: '',
      },

      //校验
      rules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] }
        ],
        shouji: [
          { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }
        ],
        yanzhengma: [
          { required: true, message: '请输入验证码', trigger: ['blur', 'change'] },
          { pattern: /^\d{6}$/, message: '请输入6位的验证码', trigger: ['blur', 'change'] }
        ],
        yonghuming: [
          { required: true, message: '请设置用户名', trigger: ['blur', 'change'] },
          { pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]{4,16}$/, message: '请设置4-16位的用户名（不支持符号）', trigger: ['blur', 'change'] }
        ],
        shezhimima: [
          { required: true, message: '请设置密码', trigger: ['blur', 'change'] },
          { pattern: /^[a-zA-Z]\w{5,17}$/, message: '以字母开头，长度在6~18之间，只能包含字母、数字和下划线', trigger: ['blur', 'change'] }
        ],
        querenmima: [
          { required: true, message: '请确认登陆密码', trigger: ['blur', 'change'] },
        ],
      },

      // 登录
      centerDialogVisible: false,
      // 注册
      registerDialog: false,

    }
  },

  methods: {
    // // 兜底校验
    // login() {
    //   this.$refs.ruleForm.validate(valid => {
    //     if (valid) {
    //       console.log('可以提交数据');
    //     } else {
    //       console.log('不能提交数据');
    //     }
    //   })
    // },
  },
}
</script>
<style lang="scss"></style>